<template>
    <div style="display: flex;justify-content: space-between; align-items: center;padding: 0 20px; margin: 20px 0;">
        <!-- 单选按钮 -->
        <el-radio-group v-model="radio" size="large">
            <el-radio-button label="sale_">销量</el-radio-button>
            <el-radio-button label="_money">销售额</el-radio-button>
        </el-radio-group>
        <!-- 下拉选择器 -->
        <el-select v-model="select" placeholder="Select" size="large">
            <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
    </div>

    <div ref="pieDom" style="width: 100%;height:400px;"></div>
</template>
<script setup lang="ts">
import { ref, onMounted, nextTick, watch } from "vue"
import * as echarts from 'echarts'; // 1.引入echarts
import * as api from "@/request/api";
import type { IAdminStatRes } from "@/request/UmsAdminController/index"
type EChartsOption = echarts.EChartsOption //2.类型别名，用在options


let pieDom = ref()  // 3.获取饼图容器的DOM，需要在setup顶层就把变量和节点绑定在一起
let result = {} as IAdminStatRes

// 封装options
function generatePieOption(str: string) {
    return {
        tooltip: {
            trigger: 'item', // 触发
            formatter: "{b} : {c}({d}%)"
        },
        // 调整图例的位置和宽度
        legend: {
            top: '5%',
            right: '100',
            width: "300px"
        },
        series: [
            {
                name: '分类',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['30%', '50%'],  //饼图的位置
                avoidLabelOverlap: false,
                label: {
                    show: true,
                    position: 'outer'
                },
                labelLine: {
                    show: true
                },
                data: result.salePie && result.salePie.map((el) => {
                    return {
                        name: el.name,
                        value: Number(el[str])
                    }
                })
            }
        ]
    }
}
async function getChartsData() {
    // 4.拿到接口的数据
    let result = await api.admin.getAdminStat()
    console.log(result);
    // 5.等到DOM更新后再渲染图表
    nextTick(() => {
        // let pieDom = ref()  // 写在这里获取不到
        // 基于准备好的dom，初始化echarts实例
        let pieChart = echarts.init(pieDom.value);
        // 6.指定图表的配置项和数据
        var pieOption = {
            tooltip: {
                trigger: 'item', // 触发
                formatter: "{b} : {c}({d}%)"
            },
            // 调整图例的位置和宽度
            legend: {
                top: '5%',
                right: '100',
                width: "300px"
            },
            series: [
                {
                    name: '分类',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: ['30%', '50%'],  //饼图的位置
                    avoidLabelOverlap: false,
                    label: {
                        show: true,
                        position: 'outer'
                    },
                    labelLine: {
                        show: true
                    },
                    data: result.salePie && result.salePie.map((el) => {
                        return {
                            name: el.name,
                            value: el.sale_yesterday
                        }
                    })
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        pieChart.setOption(pieOption);
    })
}
getChartsData()

// 单选按钮变量
let radio = ref("sale_")

// 下拉
let select = ref("yesterday")
const selectOptions = [
    {
        value: 'yesterday',
        label: '昨天',
    },
    {
        value: 'today',
        label: '今天',
    },
    {
        value: 'three_days',
        label: '前三天',
    },
    {
        value: 'seven_days',
        label: '前七天',
    },
    {
        value: 'fourteen_days',
        label: '前十四天',
    },
]
// 监听单选和下拉选择器的值的变化
watch([radio, select], (newVal) => {
    console.log(newVal);
    let str = "";
    if (newVal[0] === "_money") {
        str = newVal[1] + newVal[0]
    } else {
        str = newVal[0] + newVal[1]
    }
    // 6.指定饼图的配置项和数据

})
</script>